﻿@{
    ViewBag.Title = "Index";
}
<link href="~/Content/css/framework-theme.css" rel="stylesheet" />
<link href="~/Content/select2/select2.min.css" rel="stylesheet" />
<script src="~/Content/select2/select2.min.js"></script>
<script src="/Content/dropzone/dropzone.min.js"></script>
 
@Html.Partial("Index_js")
<style type="text/css">
        /*
    .img_thum {max-width:100px;}*/
</style>
<style type="text/css">
    #picker {
        display: inline-block;
        line-height: 10px;
        vertical-align: middle;
        margin: 0 12px 0 0;
    }

    .img_thum {
        width: 100px;
        margin-right: 5px;
    }

    .img_red {
        border: 1px solid #ff6a00;
    }

    #thelist {
        overflow-y: hidden;
        overflow-x: scroll;
    }
</style>
<style type="text/css">
    .img_thum {
        width: 100px;
        height: 100px;
    }

    #thelist {
        overflow-y: hidden;
    }

    .a-btn .fa {
        vertical-align: middle;
        font-size: 12px;
    }
    .input-group-btn{
        font-size:12px;
    }
</style>
<div style="width:100%;">
    <div class="topPanel">
        <div class="toolbar">
            <a class="a-btn-refresh" onclick="$ace.reload()"></a>
            <button class="a-btn-edit" data-bind="click:edit,disable:!dataTable.selectedModel()">修改</button>
            <button class="a-btn-add" data-bind="click:add">添加</button>
             
            <button class="a-btn-delete" data-bind="click:del,disable:!dataTable.selectedModel()">删除</button>
        </div>
        <div class="search">
            <table class="form-table" style="width:auto;">
                <tr>
                    <td>
                        <select class="a-control" id="SortID" name="SortID" data-bind="options:_sorts,optionsText:'Title',optionsValue:'Id',optionsCaption:'--选择分类--',value:searchModel().SortID">
                            <option value="0">--选择分类--</option>
                        </select>
                    </td>
                    <td style="width:100px;">
                        <select class="a-control" name="ST" data-bind="options:_sts,optionsText:'text',optionsValue:'id',optionsCaption:'--选择--',value:searchModel().ST"></select>
                    </td>
                    
                    <td>
                        <input type="text" class="a-control" placeholder="请输入要查询关键字" style="width: 200px;" data-bind="value:searchModel().keyword">
                    </td>
                    <td>
                        <button type="button" class="a-btn-search" data-bind="click:search"></button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div>
        <table class="table table-hover" data-bind="with:dataTable">
            <thead>
                <tr>
                    <th style="width:20px;"></th>
                    <th>标题</th>
                    <th>权限分类</th>
                    <th>内容分类</th>
                    <th>序号</th>
                    <th>免费时长</th>
                    <th>播放量</th>
                    <th>状态</th>
                    <th>发布时间</th>
                </tr>
            </thead>
            <tbody data-bind="foreach:models">
                <tr data-bind="click:$parent.selectRow">
                    <td data-bind="text:Id"></td>
                    <td data-bind="text:Title"></td>
                    <td data-bind="text:$ace.findName(_sorts,SortID(),'Id','Title')"></td>
                    <td data-bind="text:$ace.findName(_sorts2,SortID2(),'Id','Title')"></td>
                    <td data-bind="text:Ord"></td>
                    <td data-bind="text:FileLength"></td>
                    <td data-bind="text:Count"></td>

                    <td data-bind="text:$ace.findName(_sts,ST(),'id','text')"></td>
                    <td data-bind="dateString:CreateDate"></td>
                </tr>
            </tbody>
            @Html.Partial("_tfoot")
        </table>
    </div>
</div>

<dialogbox data-bind="with:dialog" style="width:70%;">
    <form id="form1">
       
            <table class="form-table">
                <tbody>
                    <tr>
                        <td class="form-title">标题</td>
                        <td class="form-value"><input name="Title" type="text" class="a-control required" placeholder="" data-bind="value:model().Title" /></td>
                    </tr>

                    <tr>
                        <td class="form-title">简介</td>
                        <td class="form-value">
                            <input name="Remark" id="Remark" type="text" class="a-control required" placeholder="" data-bind="value:model().Remark" />
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">价格</td>
                        <td class="form-value">
                            <input name="Price" id="Price" type="text" class="a-control required" placeholder="" data-bind="value:model().Price" />
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">免费时长</td>
                        <td class="form-value">
                            <div class="input-group">
                                <input name="FileLength" id="FileLength" type="text" class="a-control required" placeholder="" data-bind="value:model().FileLength" />
                                <span class="input-group-btn">
                                    <button type="button" class="a-btn">秒</button>
                                </span>
                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">权限分类</td>
                        <td class="form-value">
                            <select class="a-control" id="SortID" name="SortID" data-bind="options:_sorts,optionsText:'Title',optionsValue:'Id',optionsCaption:'--选择分类--',value:model().SortID"></select>
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">内容分类</td>
                        <td class="form-value">
                            <select class="a-control" id="SortID2" name="SortID2" data-bind="options:_sorts2,optionsText:'Title',optionsValue:'Id',optionsCaption:'--选择分类--',value:model().SortID2"></select>
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">序号</td>
                        <td class="form-value">
                            <input name="Ord" id="Ord" type="text" class="a-control required" placeholder="" data-bind="value:model().Ord" />
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">状态</td>
                        <td class="form-value">
                            <select name="ST" type="text" class="a-control required" data-bind="options:_sts,optionsText:'text',optionsValue:'id',optionsCaption:'--选择--',value:model().ST"></select>
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">图片</td>
                        <td class="form-value">
                            <div class="input-group">
                                <input name="ImageUrl" id="ImageUrl" type="text" class="a-control" data-bind="value:model().ImageUrl">
                                <span class="input-group-btn">
                                    <button type="button" id="btn_banner" class="a-btn"><i class="fa fa-upload"></i></button>
                                </span>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td class="form-title"></td>
                        <td class="form-value">
                            <div id="thelist" class="uploader-list"></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title">上传视频</td>
                        <td class="form-value">
                            <div class="input-group">
                                <input type="text" value="请选择文件" size="20" name="upfile" id="upfile" class="a-control" readonly style="width:90%;" />
                                <input type="button" value="浏览" onclick="path.click()" class="a-control" style="width:10%;" />
                                <input type="file" id="path" style="display:none" multiple="multiple" onchange="upfile.value=this.value">
                                <span class="input-group-btn">
                                    <button type="button" id="file" onclick="UploadStart()" class="a-btn"><i class="fa fa-upload"></i></button>
                                </span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="form-title"></td>
                        <td class="form-value">
                            <div class="input-group">
                                <input name="FileUrl" id="FileUrl" type="text" class="a-control" data-bind="value:model().FileUrl" />
                                <span class="input-group-btn">
                                    <span id="output" class="a-btn" style="width:50px">0%</span>
                                </span>
                            </div>

                        </td>
                    </tr>

                </tbody>
            </table>

        
        
    </form>
</dialogbox>

<script type="text/javascript">
    jQuery(function () {
        $("#btn_banner").dropzone({
            url: "/file/FileSave",
            previewsContainer: "#thelist",
            success: function (file, data) {
                var json = $.parseJSON(data);
                $("#ImageUrl").val(json.Url);
            }
        });

    });
</script>
<script type="text/javascript">
    var UploadPath = "";
    //开始上传
    var begin;
    function UploadStart()
    {
       
        begin = new Date();
        //var file = $("#path")[0].files[0];
        //AjaxFile(file, 0);

        var objs = $("#path")[0].files;
        var arr = new Array();
        for (var i = 0; i < objs.length; i++) {
            console.log("装载文件" + i);
            arr.push(runAsync(objs[i], 0));
        }

        Promise
            .all(arr)
            .then(function (results) {
                console.log(results);
                var end = new Date();
                var time = end - begin;
                console.log("time is=" + time);
            });

    }

    function runAsync(file, i) {
        var p = new Promise(function (resolve, reject) {
            //做一些异步操作
            console.log(file);
            AjaxFile(file, i)
        });
        return p;
    }

    function AjaxFile(file, i) {

        var name = file.name, //文件名
            size = file.size, //总大小shardSize = 2 * 1024 * 1024,
            shardSize = 2 * 1024 * 1024,//以2MB为一个分片
            shardCount = Math.ceil(size / shardSize); //总片数
        if (i >= shardCount) {
            return;
        }
        //计算每一片的起始与结束位置
        var start = i * shardSize,
            end = Math.min(size, start + shardSize);
        //构造一个表单，FormData是HTML5新增的
        var form = new FormData();
        form.append("type", "file");
        form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
        //console.log("-----------" + start+"---------------");
        //console.log(file.slice(start, end));
        //console.log("------------" + end+"--------------");
        form.append("lastModified", file.lastModified);
        form.append("fileName", name);
        form.append("total", shardCount); //总片数
        form.append("index", i + 1); //当前是第几片
        UploadPath = file.lastModified
        //Ajax提交文件
        $.ajax({
            url: "/file/UploadFile",
            type: "POST",
            data: form,
            async: true, //异步
            processData: false, //很重要，告诉jquery不要对form进行处理
            contentType: false, //很重要，指定为false才能形成正确的Content-Type
            success: function (result) {
                if (result != null) {
                    i = result.number++;
                    var num = Math.ceil(i * 100 / shardCount);
                    $("#output").html(num + '%');
                    AjaxFile(file, i);
                    if (result.mergeOk)
                    {
                        $("#output").html('100%');
                        var filepath = $("#path");
                        filepath.after(filepath.clone().val(""));
                        filepath.remove();//清空input file
                        $('#upfile').val('请选择文件');
                        console.log("success!!!");

                        

                        var end = new Date();
                        var time = end - begin;
                        console.log("time is=" + time);
                        $ace.msg("耗时" + time + "毫秒");
                        $("#FileUrl").val(result.webPath);
                    }
                }
            }
        });
    }


</script>
